<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>支付宝扫码支付测试</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <style>
        #qrcode {
            margin-top: 20px;
            width: 200px;
            height: 200px;
        }

        input {
            margin: 5px 0;
            padding: 8px;
            width: 200px;
        }

        button {
            margin-top: 10px;
            padding: 10px 15px;
        }
    </style>
</head>

<body>
    <h2>支付宝扫码支付测试页面</h2>

    <label>订单编号：<input type="text" id="orderNo" value="20250530001"></label><br />
    <label>支付金额：<input type="text" id="amount" value="0.01"></label><br />
    <button onclick="generateQRCode()">生成二维码</button>

    <div id="qrcode"></div>

    <script>
        let qrcode;

        function generateQRCode() {
            const orderNo = document.getElementById("orderNo").value;
            const amount = document.getElementById("amount").value;

            fetch('http://localhost:8080/alipay/qrcode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Accept': 'application/json',
                    'token': '1'
                },
                body: new URLSearchParams({
                    orderNo: orderNo,
                    amount: amount
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200 && data.data) {
                        const qrCodeUrl = data.data;
                        if (qrcode) {
                            // 清除旧的二维码并生成新的
                            qrcode.clear();
                            qrcode.makeCode(qrCodeUrl);
                        } else {
                            // 第一次生成二维码
                            qrcode = new QRCode(document.getElementById("qrcode"), {
                                text: qrCodeUrl,
                                width: 200,
                                height: 200,
                                colorDark: "#000000",
                                colorLight: "#ffffff"
                            });
                        }
                    } else {
                        alert("生成二维码失败：" + (data.msg || "未知错误"));
                    }
                })
                .catch(error => {
                    console.error('请求出错:', error);
                    alert("请求出错，请查看控制台日志");
                });
        }

        window.onload = () => {
            qrcode = new QRCode(document.getElementById("qrcode"), {
                text: "https://example.com",
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff"
            });
        };
    </script>



</body>

</html>